<template>
    <div id="descriptive-analysis">
        <div id="banner-text">
            <div id="desc-analy">
                <h1>
                    <img src="@/assets/jisuanjikaifa.png">
                    数据分析小工具
                </h1>
                <div id="upload-data-link">
                        <a href="" @mouseenter="mouse_enter" @mouseleave="mouse_leave" v-bind:class="animation">上传数据</a>
                </div>
            </div>
            <div id="func-intr">
                <div id="rotation-img">
                    <img v-bind:src="rotation_img" alt="">
                </div>
                <div id="rotation-text">{{ rotation_text }}</div>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: 'DescriptiveAnalysis',

    data() {
        return {
            animation: "",
            rotation_text: "简化数据分析流程",
            rotation_img: require('@/assets/rotation/rotation-1.png'),
            rotation_text_list: ["简化数据分析流程", "Web技术实现多平台", "Echarts美化图表", "源码获取便捷"],
            rotation_img_list: [require('@/assets/rotation/rotation-1.png'), require('@/assets/rotation/rotation-2.png'), require('@/assets/rotation/rotation-3.png'), require('@/assets/rotation/rotation-4.png')],
            rotation_count: 0,
        }
    },

    mounted() {
        this.start_rotation()
    },

    methods: {
        mouse_enter: function() {
            this.animation = "enter-animation"
        },
        mouse_leave: function() {
            this.animation = "leave-animation"
        },
        start_rotation: function() {
            setInterval(() => {
                if (this.rotation_count == 3){
                    this.rotation_text = this.rotation_text_list[this.rotation_count]
                    this.rotation_img = this.rotation_img_list[this.rotation_count]
                    this.rotation_count -= 3
                }
                else{
                    this.rotation_text = this.rotation_text_list[this.rotation_count]
                    this.rotation_img = this.rotation_img_list[this.rotation_count]
                    this.rotation_count++
                }
            }, 1400)
        }
    },
};
</script>

<style scoped>

#descriptive-analysis {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 200%;
    background-color: rgb(130, 207, 172);
}


#banner-text {
    width: 100%;
    height: 40%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    background-image: url('@/assets/descrdescriptive_analysis_background_img.jpg');
}


#desc-analy {
    position: absolute;
    top: 30%;
    width: 100%;
    height: 20%;
    margin: 0px;
}


#desc-analy > h1 {
    display: block;
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
    margin: 0px;
    text-align: center;
    font: 500 60px "Microsoft Yahei";
    color: rgb(65, 184, 131);
    user-select:none;
}


#desc-analy > h1 > img {
    position: relative;
    top: 4%;
}


#upload-data-link {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 40%;
}



#upload-data-link > a {
    text-decoration: none;
    display: block;
    width: 20%;
    height: 60%;
    text-align: center;
    margin: auto;
    padding: 10px 0px 0px 5px;
    font: 600 20px "Microsoft Yahei";
    letter-spacing: 10px;
    color: rgb(65, 184, 131);
    border: 2px solid rgb(65, 184, 131);
    border-radius: 60px;
    backdrop-filter: blur(20px);
}


#upload-data-link > a:hover {
    text-decoration: none;
    display: block;
    width: 20%;
    height: 60%;
    text-align: center;
    margin: auto;
    padding: 10px 0px 0px 5px;
    font: 600 20px "Microsoft Yahei";
    letter-spacing: 10px;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(65, 184, 131);
    border-radius: 60px;
    background-color: rgb(65, 184, 131);
}


@keyframes mouse_enter {
    0%{
        color: rgb(65, 184, 131);
        border: 2px solid rgb(65, 184, 131);
        border-radius: 60px;
        backdrop-filter: blur(20px);
    }
    100%{
        color: rgb(255, 255, 255);
        border: 2px solid rgb(65, 184, 131);
        border-radius: 60px;
        background-color: rgb(65, 184, 131);
    }
}


.enter-animation {
    animation-duration: 0.8s;
    animation-name: mouse_enter;
}


@keyframes mouse_leave {
    0%{
        color: rgb(255, 255, 255);
        border: 2px solid rgb(65, 184, 131);
        border-radius: 60px;
        background-color: rgb(65, 184, 131);
    }
    100%{
        color: rgb(65, 184, 131);
        border: 2px solid rgb(65, 184, 131);
        border-radius: 60px;
        backdrop-filter: blur(20px);
    }
}


.leave-animation {
    animation-duration: 0.8s;
    animation-name: mouse_leave;
}


#func-intr {
    position: absolute;
    top: 101%;
    left: 35%;
    margin: auto;
    width: 30%;
    height: 50%;
    border: 2px hidden;
    border-radius: 15px;
    background-color: rgba(27, 27, 27, 0.9);
    box-shadow: 0px 3px 5px rgb(27, 27, 27);
}


#rotation-img {
    width: 100%;
    height: 200px;
    margin: auto;
}


#rotation-img > img {
    display: block;
    width: 128px;
    height: 128px;
    margin: 40px auto;
}


#rotation-text {
    width: 80%;
    height: 50px;
    margin: auto;
    font: 500 32px "Microsoft Yahei";
    color: rgb(65, 184, 131);
    text-align: center;
    user-select:none;
}




</style>